
/**
 * 主题封面
 * @param {Object} props 
 * @returns 组件
 */
window.CoverFrame = (props) => {
    return React.createElement(Frame, {className: componentClass(props, 'ucas-cover-frame')},
        React.createElement('img', {className: 'banner', src: './images/ucas.png'}),
        React.createElement('div', {className: 'title'},
            props.title || "这是标题"
        ),
        React.createElement("div", {className: 'vice-title'}, 
            props.viceTitle || "这是副标题"
        )
    );
}

/** 目录 */
window.IndexFrame = (props) => {

    let items = (! Array.isArray(props.contents)) ? ["示例1", "示例2", "示例3"]: props.contents;

    return React.createElement(Frame, {className: componentClass(props, 'ucas-index-frame')},
        React.createElement('div', {className: 'title'},
            "目录"
        ),
        React.createElement('div', {className: 'list'},
            items.map((item, index)=>{
                return React.createElement('div', {className: 'item', key: index},
                    React.createElement('div', {}, index + 1),
                    React.createElement('div', {}, item)
                );
            })
        )
    );
}

/** 小节页 */
window.SectionFrame =  (props) => {
    return React.createElement(Frame, {className: componentClass(props, 'ucas-section-frame')},
        React.createElement('div', {className: 'background'},
            React.createElement('img', {className:'background-image', src: './images/ucas-light.png'}),
            React.createElement('div', {className:'part-number'}, 
                props.index || "Part X"
            )
        ),
        React.createElement('div', {className: 'title'},
            props.title || '这是小节标题'
        )
    );
}

/** 内容页 */

window.ContentFrame =  (props) => {
    return React.createElement(Frame, {className: componentClass(props, 'ucas-content-frame')},
        React.createElement('div', {className: 'title'},
            props.title || '页面标题'
        ),
        React.createElement('div', {className: 'hr'},
            React.createElement('div', null),
            React.createElement('div', null)
        ),
        React.createElement('div', {className: 'content'},
            props.children
        ),
        React.createElement('img', {className: 'logo', src: './images/ucas.png'})
    );
}

/** 致谢页 */
window.ThankFrame = (props) => {
    return React.createElement(Frame, {className: componentClass(props, 'ucas-thank-frame')},
        React.createElement('div', {className: 'title'},
            props.title || '谢谢观看！'
        ),
        React.createElement('div', {className: 'adv'},
            React.createElement('img', {className: 'logo', src: './images/reactdown.png'})
        ),
        React.createElement('div', {className: 'adv2'},
            "Powered by ReactDown"
        )
    );
}